import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  Dimensions,
} from 'react-native';
import {ObserverView} from './ObserverView';
import {Img} from './Img';
import {
  dpw10,
  dpw12,
  dpw14,
  dpw16,
  dpw164,
  dpw186,
  dpw20,
  dpw200,
  dpw22,
  dpw220,
  dpw30,
  dpw330,
  dpw4,
  dpw48,
  dpw6,
  dpw8,
  dpw88,
} from '../constants';
import {observer} from 'mobx-react-lite';
import {useGlobalStore, useUserInfoStore} from '../mobx';
import {getConStatus, getSumChap, t} from '../utils';
import {getColorStr} from '../themes';
import {ObserverText} from './ObserverText';
import {ObserverButton} from './ObserverButton';
import {toLink} from './Link';
import {SvgClose, SvgLockFill} from './svg';
import {ChapterItem} from '../pages/detail-card';

const screenHeight = Dimensions.get('screen').height;

/** 用户信息弹窗 */
export const ModalUserInfo = observer(({onClose}: any) => {
  const {userInfo} = useUserInfoStore();
  const {language, theme, appConfig} = useGlobalStore();

  return (
    <View
      style={[styles.box, {backgroundColor: getColorStr(theme, 'color_29')}]}>
      <ObserverView style={styles.userbox}>
        <Img
          url="/3/MH/a102874/a-det-6af26e2b6236350255dbd4594557c7c9.jpg"
          style={styles.poster}
        />
        <View style={styles.info}>
          <Text
            style={[
              styles.domain,
              {
                color: getColorStr(theme, 'color_1'),
                backgroundColor: getColorStr(theme, 'color_42'),
              },
            ]}>
            {t(language, 'domainName', {
              domain: appConfig?.ForeverOfficialDomain,
            })}
          </Text>
          <View style={styles.user}>
            <ObserverText
              tKey="account"
              tOptions={{account: userInfo?.Account}}
            />
            <ObserverText
              tKey="pasward"
              tOptions={{pasward: userInfo?.Password}}
            />
          </View>
          <ObserverButton
            style={styles.close}
            tKey="hasScreenshot"
            type="primary"
            onPress={onClose}
          />
          <ObserverText style={styles.tip} tKey="concatServer" type="primary" />
        </View>
      </ObserverView>
    </View>
  );
});

const styles = StyleSheet.create({
  box: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  userbox: {
    borderRadius: dpw16,
    marginHorizontal: dpw30,
  },
  poster: {
    borderTopLeftRadius: dpw16,
    borderTopRightRadius: dpw16,
    width: dpw330,
    height: dpw186,
  },
  info: {
    marginHorizontal: dpw30,
    marginVertical: dpw16,
  },
  domain: {
    fontSize: dpw14,
    lineHeight: dpw22,
    paddingVertical: dpw6,
    paddingHorizontal: dpw30,
    borderRadius: dpw20,
  },
  user: {
    marginHorizontal: 'auto',
    marginVertical: dpw16,
  },
  close: {
    borderRadius: dpw30,
    width: dpw200,
    marginHorizontal: 'auto',
  },
  tip: {
    marginTop: dpw12,
    marginHorizontal: 'auto',
  },
});

/** 联系客服弹窗 */
export const ModalService = observer(({onClose}: any) => {
  const {userInfo} = useUserInfoStore();
  const {theme, appConfig} = useGlobalStore();

  const goService = () => {
    if (userInfo?.Token) {
      toLink(
        `${appConfig?.OnlineCustomerUrl}&uid=${userInfo?.GameId}&name=PPMH_${userInfo?.Account}&avatar=${userInfo?.HeadImg}`,
      );
    }
    if (onClose) onClose();
  };

  return (
    <View
      style={[sstyles.box, {backgroundColor: getColorStr(theme, 'color_29')}]}>
      <ObserverView style={sstyles.con}>
        <View style={sstyles.title}>
          <ObserverText size="normal" tKey="selectContact" />
          <TouchableOpacity style={sstyles.close} onPress={onClose}>
            <SvgClose scale={0.8} />
          </TouchableOpacity>
        </View>
        <ObserverText
          style={sstyles.time}
          tKey="customerTime"
          type="desc"
          tOptions={{time: '8:00-24:00'}}
        />
        <TouchableOpacity style={sstyles.info} onPress={goService}>
          <Img
            url="/3/MH/a102874/a-det-6af26e2b6236350255dbd4594557c7c9.jpg"
            style={sstyles.icon}
          />
          <ObserverText tKey="staffService" />
        </TouchableOpacity>
      </ObserverView>
    </View>
  );
});

const sstyles = StyleSheet.create({
  box: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  con: {
    paddingHorizontal: dpw16,
    paddingVertical: dpw12,
    borderTopLeftRadius: dpw20,
    borderTopRightRadius: dpw20,
  },
  title: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  close: {
    position: 'absolute',
    right: -dpw12,
    top: -dpw12,
    zIndex: 1,
  },
  time: {
    marginTop: dpw10,
  },
  info: {
    marginHorizontal: 'auto',
    marginVertical: dpw30,
    textAlign: 'center',
  },
  icon: {
    width: dpw48,
    height: dpw48,
    marginHorizontal: 'auto',
    marginBottom: dpw12,
  },
});

export const ModalDir = observer(
  ({
    onClose,
    Title,
    Author,
    Type,
    ChapterCount,
    list,
    goDetail,
    bId,
    onEndReached,
  }: any) => {
    const {theme} = useGlobalStore();

    const _randItem = ({item}: {item: ChapterItem}) => {
      const {CoverUrl, HasPurchase, FreeFlag, ChapterTitle, InsertTime, Id} =
        item;

      return (
        <TouchableOpacity
          style={dirStyles.itembox}
          onPress={() => {
            if (goDetail) {
              goDetail(Id);
              onClose && onClose();
            }
          }}>
          <View style={{borderRadius: dpw4, overflow: 'hidden'}}>
            <Img url={CoverUrl} style={dirStyles.imgh} />
            {HasPurchase || FreeFlag ? null : (
              <ObserverView
                style={dirStyles.lockbox}
                themeStyle={{backgroundColor: 'color_29'}}>
                <SvgLockFill />
              </ObserverView>
            )}
          </View>
          <View style={dirStyles.info}>
            <ObserverText
              tKey={ChapterTitle}
              type="card-title"
              numberOfLines={1}
              ellipsizeMode="tail"
            />
            <ObserverText tKey={InsertTime} type="desc" />
          </View>
        </TouchableOpacity>
      );
    };

    return (
      <View
        style={[
          sstyles.box,
          {paddingTop: dpw220},
          {backgroundColor: getColorStr(theme, 'color_29')},
        ]}>
        <ObserverView style={dirStyles.con}>
          <View style={[sstyles.title, {marginHorizontal: dpw16}]}>
            <ObserverText
              size="normal"
              tKey={Title}
              numberOfLines={1}
              ellipsizeMode="tail"
            />
            <TouchableOpacity style={sstyles.close} onPress={onClose}>
              <SvgClose scale={0.8} />
            </TouchableOpacity>
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginBottom: dpw12,
              marginHorizontal: dpw16,
            }}>
            <ObserverText
              tKey="author"
              tOptions={{author: Author}}
              type="desc"
              numberOfLines={1}
              ellipsizeMode="tail"
            />
            <ObserverText
              style={{marginLeft: dpw8}}
              tKey={getConStatus(Type)}
              type="desc"
            />
            <ObserverText
              style={{marginLeft: dpw8, marginRight: dpw4}}
              tKey="|"
              type="desc"
            />
            <ObserverText
              tKey={getSumChap(Type)}
              tOptions={{num: ChapterCount}}
              type="desc"
            />
          </View>
          <FlatList
            style={{paddingHorizontal: dpw16, paddingBottom: dpw12}}
            data={list}
            keyExtractor={item => `${item.Id}`}
            renderItem={_randItem}
            onEndReached={onEndReached}
          />
        </ObserverView>
      </View>
    );
  },
);

const dirStyles = StyleSheet.create({
  itembox: {
    flexDirection: 'row',
    marginBottom: dpw12,
  },
  con: {
    borderTopLeftRadius: dpw20,
    borderTopRightRadius: dpw20,
    paddingTop: dpw12,
  },
  imgh: {
    width: dpw164,
    height: dpw88,
    margin: 0,
  },
  info: {
    marginLeft: dpw10,
    justifyContent: 'space-between',
  },
  lockbox: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    zIndex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
